<!-- 检查项管理-引用上级检查项 -->
<template>
  <view class="s-list">
    <Header :title="title" bgColor="#fff" :leftIconSize="20"/>
    <view v-if="treeData.length === 0" class="empty-box">
      <uv-empty mode="data" icon="/static/image/no-data.png" width="200rpx" height="260rpx" text="&nbsp;"/>
    </view>
    <view v-else class='s-list-main s-box s-check-main'>
      <view class='s-all-check'>
        <view class="num">序号</view>
        <view class="name">检查项目及内容</view>
        <view class="s-check" style="margin-right: 0rpx;width:130rpx;">
          <!--<uv-checkbox-group iconPlacement="right" placement="column" v-if="checkType!==1">-->
            <!--<uv-checkbox :checked="allCheck" name="apple" label="全选" @change="allChecked"/>-->
          <!--</uv-checkbox-group>-->
          <checkbox-group @change="allChecked">
            <label class="cu-checked-group">
              <text class="text">全选</text>
              <checkbox hidden color="#FFFFFF" value="2" />
              <view class="cu-checkbox" v-if="checkType!==2" :class="checkType===1 ? 'check-not-full' : (checkType===2 ? 'check-full': 'check-not')">
                <view class="uni-checkbox-input"></view>
              </view>
              <view class="cu-checkbox check-full iconfont icon-duihao41" v-if="checkType===2">
              </view>
            </label>
          </checkbox-group>
        </view>
      </view>
      <view class='s-check-bottom'>
        <daTree ref="DaTreeRef" :data="treeData" labelField="content" valueField="id" expandChecked showCheckbox
                :defaultCheckedKeys="defaultCheckedKeysValue" @change="handleTreeChange"/>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view v-if="treeData.length > 0" class='s-btn-common'>
      <uv-button type="primary" text="确认" :disabled="loading" @click="confirmFun()"/>
    </view>
  </view>
</template>

<script setup>
  import entryAPI from '@/api/law/entry/entry';
  import {deepClone} from './data';
  import {onLoad} from '@dcloudio/uni-app';
  import {ref, reactive, getCurrentInstance, defineProps, computed} from 'vue';

  const {proxy} = getCurrentInstance();
  const props = defineProps({
    entryType: {
      required: false,
      type: String,
      default: '1'
    },
    title: {
      required: false,
      type: String,
      default: '引用检查项'
    }
  });

  const dataList = reactive([]);
  let loading = ref(false);
  let userInfo = ref(uni.getStorageSync('userInfo'));
  const queryForm = reactive({ // 查询条件
    entryType: '1',
    createOrgId: userInfo.value.user.org.parentId
  });

  /** 数据加载 */
  onLoad(async (option) => {
    await getDataList();
  });

  /** 初始化数据 */
  let getDataList = async (e) => {
    queryForm.entryType = props.entryType;
    let res = await proxy.http.asyncPost(entryAPI.entryTreeList, queryForm);
    if (res.code === 0) {
      dataList.push(...res.data);
      treeData.value = deepClone(dataList);
    } else {
      await uni.showToast({title: res.msg, icon: 'none'});
    }
  };

  /** 确认提交 */
  const confirmFun = async () => {
    if (selectData.value.length === 0) {
      await uni.showToast({
        title: '请选择检查项',
        icon: 'none',
        duration: 2000
      })
      return
    }
    uni.showModal({
      title: '温馨提示',
      content: '确定添加该条数据？',
      success: async function (res) {
        if (res.confirm) {
          loading.value = false;
          let formData = {
            params: {
              ids: selectData.value,
              entryType: props.entryType
            }
          };
          let res = await proxy.http.asyncPost(entryAPI.entryQuoteSuperior, formData);
          if (res.code === 0) {
            await uni.showToast({icon: 'success', title: '引用成功', duration: 2000});
            loading.value = true;
            setTimeout(() => {
              goBack();
            }, 1000)
          } else {
            await uni.showToast({title: res.msg, icon: 'none'});
          }
        }
      }
    });
  };

  /** 树组件 */
  const DaTreeRef = ref();
  const treeData = ref([]);
  const selectData = ref([]);
  const defaultCheckedKeysValue = ref([]); // 多选时默认值为数组
  const allCheck = ref(false); // 全选
  // 计算递归数组的长度
  const totalCount = computed(() => {
    let count = 0;
    const recurseArray = (arr) => {
      arr.forEach(item => {
        count++;
        if (item.children) {
          recurseArray(item.children);
        }
      });
    };
    recurseArray(dataList);
    return count;
  });
  // id集合
  const idArray = computed(() => {
    let allArray = [];
    const recurseArray = (arr) => {
      arr.forEach(item => {
        allArray.push(item.id);
        if (item.children) {
          recurseArray(item.children);
        }
      });
    };
    recurseArray(dataList);
    return allArray;
  });
  let checkType = ref(0)
  const changeCss = () =>{
    if(!selectData.value.length){
      checkType.value = 0//未选
    }else if(selectData.value.length == idArray.value.length){
      checkType.value = 2//全选
    }else{
      checkType.value = 1//半选
    }
  }
  // 全选
  const allChecked = () => {
    allCheck.value = !allCheck.value;
    if (allCheck.value === true) {
      //id全选上
      defaultCheckedKeysValue.value = idArray.value
      selectData.value = idArray.value
    } else {
      defaultCheckedKeysValue.value = []
      selectData.value = []
    }
    changeCss();
  };
  // 复选按钮
  const handleTreeChange = (values, currentItem) => {
    // console.log('handleTreeChange ==>', values, currentItem)
    // 支持修改节点数据
    allCheck.value = values.length === idArray.value.length;
    selectData.value = values;
    defaultCheckedKeysValue.value = values;
    changeCss();
  };

  /** 返回上一页 */
  let goBack = async () => {
    uni.$emit("refresh", {});
    await uni.navigateBack();
  };
</script>

<style scoped lang="scss">
  .empty-box {
    background: #ffffff;
    margin-top: 20rpx;
  }
  .cu-checked-group {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
    justify-content: space-between;
    /*border-bottom: 1px #eee solid;*/

    .text{
      margin-right: 5px;
      color: #303133;
      font-size: 16px !important;
    }
  }
  .cu-checkbox{
    font-family: uvicon-iconfont;
    position: relative;
    width: 34rpx;
    height: 34rpx;
    border: 1px solid #DCDFE6;
    /*border-radius: 3px;*/
    background-color: #fff;
    box-sizing: border-box;
    &.check-not {
      border: 2px solid #DCDCDC;
      background-color: #fff;
    }

    &.check-not-full {
      border-color: #3775F6;
      background-color: #3775F6;
      .uni-checkbox-input {
        position: absolute;
        /* #ifndef APP-NVUE */
        top: 3px;
        /* #endif */
        left: 3px;
        height: 6px;
        width: 10px;
        border-bottom-width: 2px;
        border-bottom-color: #e7e7e7;
        border-bottom-style: solid;
        transform-origin: center;
      }

    }

    &.check-full {
      border-color: #007aff;
      background-color: #007aff;
      .uni-checkbox-input image{
        width: 12px;
        height: 10px;
        margin-left: 2px;
        margin-top: 3px;
      }
    }
  }
  .icon-duihao1:before {
    font-size: 12px !important;
    bottom: 2px;
    left: 2px
  }
  .s-all-check {
    width: calc(100vw - 48rpx);
    margin: 0 auto;
    padding: 0 24rpx;
  }
</style>
